<template>
  <div class="left">
    <div class="option option1">
      <div class="title">整体概况<img @click="emit('openEdit', '整体概况')" src="/images/ct_edit.png" alt="" class="icon" /></div>
      <div class="body" ref="overview$">
        <div v-html="overview"></div>
      </div>
    </div>
    <div class="option">
      <div class="title">宣传指令</div>
      <div class="body">
        <div class="table" ref="option4$"></div>
      </div>
    </div>
    <div class="option">
      <div class="title">宣传类别统计</div>
      <div class="body">
        <div class="table" ref="option2$"></div>
      </div>
    </div>
    <div class="option">
      <div class="title">播放节目类别</div>
      <div class="body">
        <div class="table" ref="option3$"></div>
      </div>
    </div>
    <!-- <div class="option">
      <div class="title">素材统计比例</div>
      <div class="body">
        <div class="table" ref="option3$"></div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, defineEmits, ref, defineProps, watch, nextTick } from "vue";

import * as echarts from "echarts";
import axios from "axios";
import { mapData } from "../data/index";

const emit = defineEmits(["openEdit", "confirm"]);

defineProps({
  overview: String,
});

const Domain = ''

// const Domain = "http://18666186515.wicp.vip";

const MAPMaterial = {
  0: "其他",
  1: "视频",
  2: "图片",
};

const MAPCommand = {
  1: "上级任务",
  2: "本级指令",
  3: "单位自选",
  4: "其他指令",
};

const MAPPLAY = {
  0: "其他",
  1: "政治",
  2: "理论",
  3: "城市",
  4: "文明",
  5: "教育",
  6: "政法",
  7: "安全",
  8: "环保",
  9: "卫健",
  10: "企服",
};

// let sortArr = ["政治", "理论", "城市", "文明", "教育", "其他"];
let sortArr = ["政治","文明","文旅","综治","其他"];


let overview$ = ref(null);
let scrollInterval;
let scrollDelay = 200;

let option2$ = ref(null);

let option3$ = ref(null);

let option4$ = ref(null);

let last = 0;

let startAutoScroll = () => {
  // 获取要滚动的 div 元素
  let $scroll = overview$.value;
  console.log("result:", $scroll.scrollTop);
  scrollInterval = setInterval(() => {
    if ($scroll.scrollTop === last) {
      $scroll.scrollTop = 0;
    }
    last = $scroll.scrollTop;
    $scroll.scrollTo({
      top: $scroll.scrollTop + 1,
    });
  }, 80);
};

let stopAutoScroll = () => {
  // 停止自动滚动，清除定时器
  clearInterval(scrollInterval);
};

let getStatisticsPlay = async () => {
  let result = (await axios.post(Domain + "/gy/admin/nindex/statisticsPublicity")).data;

  let titles = [];
  let series = [];

  result.data.sort((a, b) => {
    return sortArr.indexOf(b.type) - sortArr.indexOf(a.type);
  });

  result.data.forEach((item) => {
    titles.unshift(item.type);
    series.unshift(item.count);
  });

  console.log(result.data);
  var chart2 = echarts.init(option2$.value);
  chart2.setOption({
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {},
    grid: {
      left: "3%",
      right: "10%",
      bottom: "10%",
      top: "10%",
      containLabel: true,
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      axisLine: {
        show: true,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#21344a",
        },
      },
      axisLabel: {
        color: "#9ba3c8",
        fontSize: 10,
      },
    },
    xAxis: {
      type: "category",
      data: titles,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#9ba3c8",
        fontSize: 10,
      },
    },
    series: [
      {
        type: "bar",
        data: series,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgba(47, 142, 232,1)",
            },
            {
              offset: 1,
              color: "rgba(14, 88, 237,1)",
            },
          ]),
        },
        label: {
          show: true,
          position: "top", // 标签位置，可选值：'top'、'insideTop'、'inside'、'insideBottom' 等
          color: "#9ba3c8", // 标签文字颜色
          fontSize: 12, // 标签文字大小
          fontWeight: "bold", // 标签文字粗细
          formatter: "{c}", // 标签内容格式化，{c} 表示数据值
        },
        barWidth: 20,
      },
    ],
  });
};

// let getStatisticsMaterial = async () => {
//   let result = (await axios.post(Domain + "/gy/admin/nindex/statisticsMaterial", {})).data;

//   let mapMaterialData = {};
//   result.data.forEach((item) => {
//     if (!mapMaterialData[item.date]) {
//       mapMaterialData[item.date] = {
//         [MAPMaterial[item.type]]: item.count,
//       };
//     } else {
//       mapMaterialData[item.date][MAPMaterial[item.type]] = item.count;
//     }
//   });

//   let titles = Object.keys(mapMaterialData).reverse();
//   var chart3 = echarts.init(option3$.value);
//   chart3.setOption({
//     tooltip: {
//       trigger: "axis",
//     },
//     legend: {
//       left: 10,
//       top: 10,
//       itemGap: 6,
//       textStyle: {
//         color: "#fff",
//         fontSize: 10,
//       },
//     },
//     grid: {
//       top: "25%",
//       left: "10%",
//       bottom: "16%",
//     },
//     xAxis: {
//       type: "category",
//       boundaryGap: false,
//       data: titles,
//       axisLabel: {
//         color: "#aaa",
//         fontSize: 10,
//       },
//     },
//     yAxis: {
//       type: "value",
//       boundaryGap: [0, "10%"],
//       axisLine: {
//         show: true,
//       },

//       axisLabel: {
//         color: "#aaa",
//         fontSize: 10,
//       },
//     },
//     series: [
//       {
//         smooth: true,
//         name: "图片",
//         type: "line",
//         symbol: "none",
//         sampling: "lttb",
//         itemStyle: {
//           color: "rgba(1, 133, 234,0.5)",
//         },
//         areaStyle: {
//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//             {
//               offset: 0,
//               color: "rgba(1, 133, 234,1)",
//             },
//             {
//               offset: 1,
//               color: "rgba(1, 133, 234,0)",
//             },
//           ]),
//         },
//         data: titles.map((item) => {
//           return mapMaterialData[item]["图片"] || 0;
//         }),
//       },
//       {
//         smooth: true,
//         name: "视频",
//         type: "line",
//         symbol: "none",
//         sampling: "lttb",
//         itemStyle: {
//           color: "rgba(43, 234, 102,0.5)",
//         },
//         areaStyle: {
//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//             {
//               offset: 0,
//               color: "rgba(43, 234, 102,1)",
//             },
//             {
//               offset: 1,
//               color: "rgba(43, 234, 102,0)",
//             },
//           ]),
//         },
//         data: titles.map((item) => {
//           return mapMaterialData[item]["视频"] || 0;
//         }),
//       },
//       {
//         smooth: true,
//         name: "其他",
//         type: "line",
//         symbol: "none",
//         sampling: "lttb",
//         itemStyle: {
//           color: "rgba(116, 142, 33,0.5)",
//         },
//         areaStyle: {
//           color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
//             {
//               offset: 0,
//               color: "rgba(116, 142, 33,1)",
//             },
//             {
//               offset: 1,
//               color: "rgba(116, 142, 33,0)",
//             },
//           ]),
//         },
//         data: titles.map((item) => {
//           return mapMaterialData[item]["其他"] || 0;
//         }),
//       },
//     ],
//   });
// };

let getStatisticsCommand = async () => {
  let result = (await axios.post(Domain + "/gy/admin/nindex/statisticsCommand", {})).data;

  let mapCommandData = {};
  result.data.forEach((item) => {
    mapCommandData[item["type"]] = item.count;
  });
  console.log(mapCommandData);
  let color = ["#2056ff", "#01e4ed", "#08c88c", "#748e21"];
  let data = result.data.map((item, index) => {
    return {
      value: item.count,
      name: item.type,
      itemStyle: {
        color: color[index],
      },
    };
  });

  let series = [
    {
      type: "pie",
      radius: "50%",
      center: ["50%", "40%"],
      data: data,
      label: {
        color: "rgba(255, 255, 255, 0.7)",
        fontSize: 12,
      },
      labelLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 1)",
        },
        smooth: 0.2,
        length: 10,
        length2: 20,
      },

      animationType: "scale",
      animationEasing: "elasticOut",
      animationDelay: function (idx) {
        return Math.random() * 200;
      },
    },
  ];

  var chart4 = echarts.init(option4$.value);
  chart4.setOption({
    backgroundColor: "transparent",
    legend: {
      bottom: 10,
      itemGap: 10,
      textStyle: {
        rich: {
          a: {
            color: "#aaa",
            fontSize: 10,
          },
          b: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "bolder",
          },
        },
      },
      formatter: function (name) {
        var fixseries = series[0]; // 获取第一个系列的配置信息

        // 找到对应图例项的数据项
        var dataItem = fixseries.data.find(function (item) {
          return item.name === name;
        });

        // 获取当前图例项的数据值
        var dataValue = dataItem.value;

        // 计算总值
        var totalValue = 0;
        fixseries.data.forEach(function (item) {
          totalValue += item.value;
        });

        // 计算比例
        var percentage = ((dataValue / totalValue) * 100).toFixed(2) + "%";

        // 返回自定义的文字内容，包括比例
        return "{a|" + name + "}" + " {b|(" + percentage + ")}";
      },

      itemWidth: 10,
      itemHeight: 10,
    },

    tooltip: {
      trigger: "item",
    },
    series,
  });
};

let getStatisticsPublicity = async () => {
  let result = (await axios.post(Domain + '/gy/admin/nindex/statisticsPlay')).data

  let titles = []
  let series = []
  result.data.forEach(item => {
    titles.unshift(item.type)
    series.unshift(item.count)
  })

  console.log(result.data)
  var chart1 = echarts.init(option3$.value);
  chart1.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '10%',
      bottom: '10%',
      top: "10%",
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        color: '#9ba3c8',
        fontSize: 10
      }
    },
    yAxis: {
      type: 'category',
      data: titles,
      splitLine: {
        show: true,
        lineStyle: {
          color: '#21344a'
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#9ba3c8',
        fontSize: 10
      }
    },
    series: [
      {
        type: 'bar',
        data: series,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: 'rgba(47, 142, 232,1)'
            },
            {
              offset: 1,
              color: 'rgba(14, 88, 237,1)'
            }
          ])
        },
        label: {
          show: true,
          position: 'right', // 标签位置，可选值：'top'、'insideTop'、'inside'、'insideBottom' 等
          color: '#9ba3c8', // 标签文字颜色
          fontSize: 12, // 标签文字大小
          fontWeight: 'bold', // 标签文字粗细
          formatter: '{c}' // 标签内容格式化，{c} 表示数据值
        },
        barWidth: 12
      }
    ]
  });


}

onMounted(() => {
  nextTick(() => {
    getStatisticsPlay();
    getStatisticsPublicity();
    getStatisticsCommand();
    startAutoScroll();
  });
});

onBeforeUnmount(() => {
  stopAutoScroll();
});
</script>

<style lang="scss" scoped>
.left {
  width: 22%;
  max-width: 800px;
  position: absolute;
  left: 10px;
  top: 8.5%;
  height: 91%;
  z-index: 99;

  .option {
    width: 100%;
    background-color: rgba(7, 20, 36, 0.7);
    height: 28%;
    background-size: 100% 100%;
    border: 2px solid rgba(65, 141, 255, 0.15);
    text-align: center;
    margin-bottom: 2%;
    border-radius: 8px;

    .title {
      color: #fff;
      padding: 8px 0;
      font-size: 16px;
      margin-top: -1px;
      font-weight: bold;
      font-style: italic;
      letter-spacing: 2px;
      background: url("/images/ctitbg.png") no-repeat;
      background-size: 100% 100%;
      position: relative;

      .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10px;
        width: 35px;
        cursor: pointer;
      }
    }

    .body {
      height: 85%;

      .op1 {
        width: 100%;
        height: 100%;
        position: relative;
      }

      .table {
        width: 100%;
        height: 100%;
      }

      .txtcenter {
        position: absolute;
        color: #fff;
        font-size: 12px;
        transform: translateX(-50%);
        left: 50%;
        top: 35%;

        > div {
          line-height: 1.5;
          opacity: 0.7;

          > span {
            margin-left: 2px;
          }
        }
      }
    }
  }

  .option1 {
    height: 12%;

    .body {
      width: 100%;
      height: 30%;
      color: #9aa5cf;
      text-align: justify;
      padding: 0 10px;
      margin-top: 10px;
      font-size: 12px;
      letter-spacing: 1px;
      line-height: 2;
      overflow-y: auto;
    }
  }
}
</style>
